<template>
    <div class="register-wrapper" >
        
        <div class="register-container">
            
            <div class="register-main">
                
                    <el-form :model="user" ref="userRef" :rules="rules">
                        <div class="register-title">用户注册</div>
                        <el-form-item prop="nickname"  class="input-deep">
                            <el-input prefix-icon="el-icon-edit-outline" v-model="user.nickname" placeholder="请输入用户昵称" />
                        </el-form-item>
                        <el-form-item prop="username"  class="input-deep">
                            <el-input prefix-icon="el-icon-user" v-model="user.username" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item prop="password"  class="input-deep">
                            <el-input prefix-icon="el-icon-key" v-model="user.password" placeholder="请输入密码" show-password />
                        </el-form-item>
                        <el-form-item prop="confirmPassword"  class="input-deep">
                            <el-input prefix-icon="el-icon-check" v-model="user.confirmPassword" placeholder="请二次输入密码" show-password />
                        </el-form-item>
                        <el-form-item prop="phone"  class="input-deep">
                            <el-input prefix-icon="el-icon-mobile-phone" v-model="user.phone" placeholder="请输入手机号码" />
                        </el-form-item>
                        <el-form-item prop="code" class="input-deep btn-deep2" >
                          
                            <div style="display: flex;justify-content: space-around;">
                                <el-input prefix-icon="el-icon-lock" v-model="user.code" placeholder="请输入验证码" style="width: 80%;" />
                                <el-button style="margin-left: 10px;" @click="sendSms" :disabled="send.flag">{{ send.text }}</el-button>
                                
                            </div>
                           
                            
                        </el-form-item>
                        <el-form-item prop="email"  class="input-deep">
                            <el-input prefix-icon="el-icon-message" v-model="user.email" placeholder="请输入邮箱" autocomplete="off" />
                        </el-form-item>
                       
                        <el-form-item class="btn-deep" style="text-align: center;">
                            <el-button style="width: 100%; " @click="registerUser">注 册</el-button>
                            <div class="user-option">
                                <div style="display: flex;">
                                    已有账号?<div class="register-option" @click="$router.push('/login')">立即登录</div>
                                </div>
                                
                                <div class="reset-password-option" @click="$router.push('/reset/password')">忘记密码</div>
                                
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
        </div>

    </div>
</template>

<script>

import {rules} from '@/utils/rules'
import {get,post} from '@/utils/api'
import md5 from 'js-md5';
export default {

    

    data(){
        let checkPhone = (rule, value, callback)=>{

            if(!rules.phone.test(value)){
                return callback(new Error('手机号码格式错误'));
            }
            return callback();
        
        }
        let checkEmail = (rule, value, callback)=>{
            if(!rules.email.test(value)){
                return callback(new Error('邮箱格式有误'));
            }
            return callback();
        }
        let checkConfirmPaswword = (rule, value, callback)=>{
            if(this.user.password != value){
                return callback(new Error('两次输入的密码不一致'));
            }
            return callback();
        }
        
        return{
            user:{},
            rules:{
                nickname:[{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
                username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password:[{ required: true, message: '请输入用户密码', trigger: 'blur' }],
                confirmPassword:[{ required: true, message: '请输入二次确认密码', trigger: 'blur' },{validator:checkConfirmPaswword,trigger:'blur'}],
                phone:[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator:checkPhone,trigger:'blur'}],
                code:[{ required: true, message: '请输入验证码', trigger: 'blur' }],
                email:[{ required: true, message: '请输入邮箱', trigger: 'blur' },{validator:checkEmail,trigger:'blur'}]
            },
            send:{
                flag:false,
                text:'发送验证码',
                sec:60,
                timer:null
            }
            
        }
    },
    methods:{
        sendSms(){

            const promise = get({
                url:'/base-sms/sms/send/captcha',
                params:{phone:this.user.phone}
            });

            promise.then(res=>{
                if(res){
                    if(res.code === 200){
                        this.send.flag = true;
                        this.countdown();
                        this.$message.success(res.message);
                        return;
                    }
                    this.$message.error(res.message);
                }
            });

        },
        countdown(){
            if(this.send.timer === null){
                this.send.timer = setInterval(()=>{

                    if(this.send.sec>0){
                        this.send.sec -=1;
                        this.send.text = `重新发送(${this.send.sec})`
                    }else{
                        clearInterval(this.send.timer);
                        this.send.flag = false;
                        this.send.sec = 60;
                        this.send.timer = null;
                        this.send.text = '发送验证码'
                        
                        
                    }


                },1000)
            }
        },
        registerUser(){
            this.$refs['userRef'].validate((valid)=>{
                if(valid){
                    let register = JSON.parse(JSON.stringify(this.user));
                    register.password = md5(register.password);
                    const promise = post({
                        url:'/base-user/front/user/register',
                        data:{...register}
                    });

                    promise.then(res=>{
                        if(res){
                            if(res.code === 200){
                                this.$message.success(res.message);
                                this.$router.push('/login');
                                return;
                            }
                            this.$message.error(res.message);
                        }
                    })
                }

            })

        }

    }

}
</script>

<style scoped>

.register-container{
    background-color: #fff;
    width: 500px;
    height: 650px;
    
    border: 1px solid #dcdfe6;

    border-radius: 10px;
    

    animation: bounceInDown 1s;
}

.register-title{
    width: 100%;
    text-align: center;
   /* padding-top: 40px; */
   padding-bottom: 20px;
   font-weight: 900;
   color: #FF6900;
   font-size: 26px;
    
}
.register-main{
    width: 100%;
    height: 650px;
    /* align-items: center; */
    display: flex;
    justify-content: center;
    align-items: center;
}



.btn-deep >>>button{
    border-radius: 0;
    background-color: #FF6900;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
}
.input-deep>>>input{
    border: 1px solid #dcdfe6;
    border-radius: 0;

}
.btn-deep2>>>button{
    border-radius: 0;
    background-color: #fff;
    color: #999;
    font-weight: 400;
    letter-spacing: 2px;
    /* border-top: 0; */
    /* border-left: 0; */
}

.user-option{
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    color: #999;

}

.reset-password-option:hover{
    color: #FF6900;
    cursor: pointer;
}
.register-option:hover{
    color: #FF6900;
    cursor: pointer;
}
.register-wrapper{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #fff; */
    background-image: url('~@/assets/bg.jpg');
    background-size: 100% 100%;

}

</style>